<template>
  <div class="comlfet flexC">
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          动态监管
        </p>
        <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="toutinemodel = true">日常巡查</p>
      </div>
      <ul class="flex JustifyContentSA">
        <li class="textC">
          <p class="font_s22 Bold ball" style="color: #FEE9CF;">2150</p>
          <p class="font_s16 colorF">年检</p>
        </li>
        <li class="textC" @click="model7 = true">
          <p class="font_s22 Bold ball1" style="color: #BCF1FF">345</p>
          <p class="font_s16 colorF">实地检查</p>
        </li>
        <li class="textC" @click="model8 = true">
          <p class="font_s22 Bold ball2" style="color: #E5FFCD;">11</p>
          <p class="font_s16 colorF">财务审计</p>
        </li>
        <li class="textC" @click="model9 = true">
          <p class="font_s22 Bold ball3" style="color: #B5D6FF;">2</p>
          <p class="font_s16 colorF">访谈约谈</p>
        </li>
      </ul>
    </div>
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="flex1 font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          风险监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF; " @click="dmodel = true">处置清单</p>
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="riskmodels = true">异常名录</p>
          <!-- <p style="padding: 0.3125rem;"></p> -->
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="rexaminemodel = true">风险模型</p>
          <!-- <p style="padding: 0.3125rem;"></p> -->
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="riskmodel = true">标准查看</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA" style="padding-top: 1rem;">
        <li class="textC" @click="model1 = true">
          <div class="square">
            <p class="font_s36 colorF LH3R">2085</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级A</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（正常）</p>
        </li>
        <li class="textC" @click="model2 = true">
          <div class="square1">
            <p class="font_s36 colorF LH3R">99</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级B</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（异常名录）</p>
        </li>
        <li class="textC" @click="model3 = true">
          <div class="square2">
            <p class="font_s36 colorF LH3R">141</p>
            <p class="font_s16 colorF LH2_5R" style="padding: 0 0.5rem;">风险评估等级C</p>
          </div>
          <p class="font_s18 Bold" style="color:#80AAEA">（名存实亡）</p>
        </li>
      </ul>
    </div>
    <div class="category">
      <div class="flex JustifyContentSB">
        <p class="flex1 font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          信用监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <!-- <p class="font_s16 Bold subtitle textC" style="color:#84BBFF; " @click="xmodel = true">处置清单</p> -->
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="creditmodel = true">信用模型</p>
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="cexaminemodel = true">标准查看</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA" style="padding-top: 1rem;">
        <li class="textC" @click="model4 = true">
          <div class="square">
            <p class="font_s36 colorF LH3R">1062</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级A
              <br />
              AAA\AA\A
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（正常）</p> -->
        </li>
        <li class="textC" @click="model5 = true">
          <div class="square1">
            <p class="font_s36 colorF LH3R">950</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级B
              <br />
              BBB\BB\B
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（异常登陆）</p> -->
        </li>
        <li class="textC" @click="model6 = true">
          <div class="square2">
            <p class="font_s36 colorF LH3R">195</p>
            <p class="font_s16 colorF" style="padding: 0 0.5rem;">
              信用评估等级C
              <br />
              CCC\CC\C\D
            </p>
          </div>
          <!-- <p class="font_s18 Bold" style="color:#80AAEA">（名存实亡）</p> -->
        </li>
      </ul>
    </div>
    <div class="category flex1 flexC">
      <div class="flex JustifyContentSB" style="padding-top:0.25rem;">
        <p class="font_s18 colorF">
          <img class="verticM" style="height: 1.5625rem;padding-right: 1rem;" src="../../assets/img/comprehensive/12.png" alt="" />
          分类监管
        </p>
        <div class="flex flex1 JustifyContentFE">
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="classifymodels = true">分类模型</p>
          <p style="padding: 0.3125rem;"></p>
          <p class="font_s16 Bold subtitle textC" style="color:#84BBFF;" @click="classifymodel = true">监管频次</p>
        </div>
      </div>
      <div class="flex1 fljgbj"></div>
    </div>
    <Modal v-if="toutinemodel" @hidden="hidden2"><img class="bj3" src="../../assets/img/comprehensive/98.png" alt="" /></Modal>
    <Modal v-if="riskmodels" @hidden="hidden7"><img class="bj1" src="../../assets/img/comprehensive/105.png" alt="" /></Modal>
    <ModalPolygon v-if="dmodel" @hidden="hidden8"><Disposal ></Disposal></ModalPolygon>
    <ModalPolygon v-if="riskmodel" @hidden="hidden"><RiskModel></RiskModel></ModalPolygon>
    <Modal v-if="rexaminemodel" @hidden="hidden3"><img class="bj3" src="../../assets/img/comprehensive/103.png" alt="" /></Modal>
    <Modal v-if="creditmodel" @hidden="hidden1"><img class="bj3" src="../../assets/img/comprehensive/99.png" alt="" /></Modal>
    <ModalPolygon v-if="cexaminemodel" @hidden="hidden4"><CreditModel></CreditModel></ModalPolygon>
    <ModalPolygon v-if="classifymodels" @hidden="hidden6"><Classifymodel></Classifymodel></ModalPolygon>
    <Modal v-if="classifymodel" @hidden="hidden5"><Disposition class="bj4"></Disposition></Modal>
    <Modal v-if="model1" @hidden="hidden10"><FInventoryA class="bj5"></FInventoryA></Modal>
    <Modal v-if="model2" @hidden="hidden11"><FInventoryB class="bj5"></FInventoryB></Modal>
    <Modal v-if="model3" @hidden="hidden12"><FInventoryC class="bj5"></FInventoryC></Modal>
    <Modal v-if="model4" @hidden="hidden13"><XInventoryA class="bj5"></XInventoryA></Modal>
    <Modal v-if="model5" @hidden="hidden14"><XInventoryB class="bj5"></XInventoryB></Modal>
    <Modal v-if="model6" @hidden="hidden15"><XInventoryC class="bj5"></XInventoryC></Modal>
    <Modal v-if="model7" @hidden="hidden16"><InventoryB class="bj5"></InventoryB></Modal>
    <Modal v-if="model8" @hidden="hidden17"><InventoryC class="bj5"></InventoryC></Modal>
    <Modal v-if="model9" @hidden="hidden18"><InventoryD class="bj5"></InventoryD></Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
import ModalPolygon from '@/components/ModalPolygon.vue'
import InventoryB from './components/InventoryB.vue'
import InventoryC from './components/InventoryC.vue'
import InventoryD from './components/InventoryD.vue'
import FInventoryA from './components/FInventoryA.vue'
import FInventoryB from './components/FInventoryB.vue'
import FInventoryC from './components/FInventoryC.vue'
import XInventoryA from './components/XInventoryA.vue'
import XInventoryB from './components/XInventoryB.vue'
import XInventoryC from './components/XInventoryC.vue'
import Classifymodel from './components/Classifymodel.vue'
import RiskModel from './components/RiskModel.vue'
import CreditModel from './components/CreditModel.vue'
import Disposition from './components/Disposition.vue'
import Disposal from './components/Disposal.vue'
export default {
  name: 'ComLfet',
  components: {
    Modal,
    ModalPolygon,
    RiskModel,
    CreditModel,
    Disposition,
    InventoryB,
    InventoryC,
    InventoryD,
    FInventoryA,
    FInventoryB,
    FInventoryC,
    XInventoryA,
    XInventoryB,
    XInventoryC,
    Classifymodel,
    Disposal
  },
  data () {
    return {
      toutinemodel: false,
      dmodel: false,
      riskmodels: false,
      riskmodel: false,
      rexaminemodel: false,
      creditmodel: false,
      cexaminemodel: false,
      classifymodel: false,
      classifymodels: false,
      model1: false,
      model2: false,
      model3: false,
      model4: false,
      model5: false,
      model6: false,
      model7: false,
      model8: false,
      model9: false
    }
  },
  methods: {
    hidden () {
      this.riskmodel = false
    },
    hidden1 () {
      this.creditmodel = false
    },
    hidden2 () {
      this.toutinemodel = false
    },
    hidden3 () {
      this.rexaminemodel = false
    },
    hidden4 () {
      this.cexaminemodel = false
    },
    hidden5 () {
      this.classifymodel = false
    },
    hidden6 () {
      this.classifymodels = false
    },
    hidden7 () {
      this.riskmodels = false
    },
    hidden8 () {
      this.dmodel = false
    },

    hidden10 () {
      this.model1 = false
    },
    hidden11 () {
      this.model2 = false
    },
    hidden12 () {
      this.model3 = false
    },
    hidden13 () {
      this.model4 = false
    },
    hidden14 () {
      this.model5 = false
    },
    hidden15 () {
      this.model6 = false
    },
    hidden16 () {
      this.model7 = false
    },
    hidden17 () {
      this.model8 = false
    },
    hidden18 () {
      this.model9 = false
    }
  }
}
</script>
<style lang="scss" scoped>
.comlfet {
  position: absolute;
  top: 15%;
  left: 1rem;
  height: 80%;
  width: 25%;
  .category {
    padding: 0.85rem 1rem;
    background: url(../../assets/img/comprehensive/11.png) no-repeat;
    background-size: 100% 100%;
    .subtitle {
      line-height: 1.5625rem;
      width: 4.75rem;
      height: 1.5625rem;
      border: 1px solid rgba(90, 161, 248, 1);
      border-radius: 13px;
    }
    .ball,
    .ball1,
    .ball2,
    .ball3 {
      width: 5.625rem;
      height: 5.625rem;
      line-height: 5.625rem;
    }
    .ball {
      background: url(../../assets/img/comprehensive/13.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball1 {
      background: url(../../assets/img/comprehensive/14.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball2 {
      background: url(../../assets/img/comprehensive/15.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball3 {
      background: url(../../assets/img/comprehensive/16.png) no-repeat;
      background-size: 100% 100%;
    }
    .square {
      background: url(../../assets/img/comprehensive/17.png) no-repeat;
      background-size: 100% 100%;
    }
    .square1 {
      background: url(../../assets/img/comprehensive/18.png) no-repeat;
      background-size: 100% 100%;
    }
    .square2 {
      background: url(../../assets/img/comprehensive/19.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .fljgbj {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/95.png) no-repeat;
    background-size: 95% 60%;
    background-position: center;
  }
  .bj {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/93.png) no-repeat;
    background-size: 95% 95%;
    background-position: center;
  }
  .bj1 {
    width: 95%;
    height: 95%;
    position: absolute;
    top: 5%;
    left: 2%;
  }
  .bj2 {
    width: 100%;
    height: 100%;
    background: url(../../assets/img/comprehensive/92.png) no-repeat;
    background-size: 90% 95%;
    background-position: center;
  }
  .bj3 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .bj4 {
    width: 70%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 15%;
  }
  .bj5 {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    overflow: auto;
    background: rgba(53, 89, 242, 1);
    border: 1px solid rgba(19, 60, 149, 1);
  }
  .bj5::-webkit-scrollbar {
    width: 0;
  }
}
</style>
